import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';
import { Icon } from 'antd';
import globalStyles from '../../style/common.less';

const modalRoot = document.getElementById('dialog-root');

class EnvironmentAqiTopChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('EnvironmentAqiTopChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 280,
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.dataList !== this.props.dataList) {
      if (nextProps.dataList) {
        this.setChartData(nextProps.dataList);
        // fix 切换service图层之后 右侧
      }
    }
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    const { dataList } = this.props;
    if (!dataList) {
      return;
    }
    if (dataList.length > 0) {
      this.setChartData(dataList);
    }
  }

  setChartData(dataList) {
    var preData = [{ value: 0, name: '优' }, { value: 0, name: '良' }, { value: 0, name: '轻度污染' }, { value: 0, name: '中度污染' }, { value: 0, name: '重度污染' }, { value: 0, name: '严重污染' }]
    dataList.map((item, index) => {
      if (item['aqiValue'] < 51) {
        preData[0].value++
      } else if (item['aqiValue'] < 101) {
        preData[1].value++
      } else if (item['aqiValue'] < 151) {
        preData[2].value++
      } else if (item['aqiValue'] < 201) {
        preData[3].value++
      } else if (item['aqiValue'] < 301) {
        preData[4].value++
      } else {
        preData[5].value++
      }
    })
    var chartData=[];
    preData.map((item,index)=>{
      if(item.value!==0){
        chartData.push(item);
      }
    })
    const option = {
      title: {
        text: '空气质量\n\n统计',
        textStyle: {
          color: '#f2f2f2',
          fontSize: 16,
        },
        x: 'center',
        y: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {d}%"
      },
      grid: {
        top: '3%',
        left: '3%',
        right: '15%',
        bottom: '3%',
        containLabel: true,
      },
      series: [
        {
          name: '空气质量',
          type: 'pie',
          radius: ['40%', '55%'],
          label: {
            normal: {
              formatter: '{b|{b}}:{c|{c}个}\n{per|({d}%)}',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                b: {
                  fontSize: 14,
                  lineHeight: 33
                },
                c: {
                  fontSize: 14,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            }
          },
          data:chartData
        }
      ]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `城市空气质量统计（实时）`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default EnvironmentAqiTopChart;
